<template>
    <!-- hky 2023年3月20日 19点15分 -->
    <!-- 主页（数据统计） -->
  <div id="homePage">
    <el-card class="box-card">
      <div style="margin-top: 15px;width:800px">
        <!-- 输入sql的文本框 -->
        <el-input placeholder="请输入SQL" v-model="input" class="input-with-select" style="width:500px">
          <!-- 选择图表类型 -->
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 100px;">
            <el-option label="折线图" value="lineChart"></el-option>
            <el-option label="柱状图" value="barChart"></el-option>
            <el-option label="饼状图" value="pieChart"></el-option>
            <el-option label="漏斗图" value="funnelChart"></el-option>
          </el-select>
        </el-input>
        <!-- 生成按钮 -->
        <el-button slot="append" type="primary" @click="handleCommand" >生成</el-button>
      </div>
      <!-- 表格 -->
        <el-table :data="chartList" border>
          <el-table-column property="id" label="Id" width="50"></el-table-column>
          <el-table-column property="chartType" label="图表类型" width="100"></el-table-column>
          <el-table-column property="chartSql" label="SQL" width="650"></el-table-column>
          <el-table-column property="chartCreateTime" label="创建时间" width="200"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button @click="handleUpdate(scope.$index, scope.row)" style="background-color: #34262c; color: #fff" size="mini">修改</el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" style="background-color: #d7000f; color: #fff" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="sql" :label-width="formLabelWidth">
              <el-input v-model="form.chartSql" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图表类型" :label-width="formLabelWidth">
              <el-select v-model="form.chartType" placeholder="请选择">
                <el-option label="折线图" value="lineChart"></el-option>
                <el-option label="柱状图" value="barChart"></el-option>
                <el-option label="饼状图" value="pieChart"></el-option>
                <el-option label="漏斗图" value="funnelChart"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateChart()">确 定</el-button>
          </div>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'homePage',
  data () {
    return {
      chartList: [],
      // sql输入框值
      input: '',
      // 图表类型下拉框值
      select: '',
      // 添加还是显示 1添加 0显示
      type: '1',
      form: {
        id: '',
        chartType: '',
        chartSql: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  // 初始化加载数据
  mounted () {
    this.getChartList()
  },
  methods: {
    // 修改
    updateChart () {
      this.$axios.post('/HomePage/updateChart', this.form
      ).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除
    handleDelete (index, row) {
      this.$axios.get('/HomePage/deleteChartByID/' + row.id
      ).then(res => {
        if (res.data.flag) {
          console.log(res.data.obj)
          console.log(res.data.flag)
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改初始化
    handleUpdate (index, row) {
      this.form.chartType = row.chartType
      this.form.id = row.id
      this.form.chartSql = row.chartSql
      this.dialogFormVisible = true
      console.log(row)
      console.log('修改')
    },
    // 查询表格数据
    getChartList () {
      this.$axios.post('/HomePage/getChartList'
      ).then(res => {
        this.chartList = res.data.obj
      }).catch(err => {
        console.log(err)
      })
    },
    // 图标类型下拉框
    handleCommand () {
      this.$forceUpdate()
      // 判断下拉框选中的图标类型
      if (this.select === 'pieChart') {
        // 饼状图
        this.pieChart()
      } else if (this.select === 'barChart') {
        // 柱状图
        this.barChart()
      } else if (this.select === 'lineChart') {
        // 柱状图
        this.lineChart()
      } else if (this.select === 'funnelChart') {
        // 漏斗图
        this.funnelChart()
      }
    },
    // 折现图
    lineChart () {
      this.$axios.get('/HomePage/getBarChart/' + this.input + '/' + this.select + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '生成完毕',
            type: 'success'
          })
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 柱状图
    barChart () {
      this.$axios.get('/HomePage/getBarChart/' + this.input + '/' + this.select + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '生成完毕',
            type: 'success'
          })
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 饼状图
    pieChart () {
      this.$axios.get('/HomePage/getPieChart/' + this.input + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '生成完毕',
            type: 'success'
          })
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 漏斗图
    funnelChart () {
      this.$axios.get('/HomePage/getFunnelChart/' + this.input + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '生成完毕',
            type: 'success'
          })
        } else {
          this.$message('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }

}
</script>
<style>
    .btnFalses{
    background: #C90003 !important;
            color: #fff !important;
            ;border-color:#C90003 !important;
    }
</style>
<style scoped>
.el-icon-arrow-down {
    font-size: 12px;
}
.box-card {
    height: 100%;
    width: 100%
}
</style>
